<!--二次封装表单自定义组件-->
<template>
  <el-form ref="formData" :model="formData" status-icon :inline="inline" :inline-message="inline" :size="size"
           :label-position="labelPosition" :label-width="labelWidth" class="yy-search">
    <el-row :gutter="gutter">
      <el-col class="el-list-item" :span="col" v-for="(item, index) in searchTitle" :key="index" v-show="isShow(index)">
        <pop-Form
          :class="{'yy-item':isSenior}"
          :item="item"
          :value="formData[item.name]"
          @input="handleInput($event,item.name)">
        </pop-Form>
      </el-col>
      <el-col :span="colBtn">
        <div :class="{'yy-btn':!isSenior,'yy-btn-long':isSenior}">
          <el-button class="btn btnBycx" :size="size" type="primary" @click="submitForm">查询</el-button>
          <el-button class="btn" :size="size" type="warning " @click="clickBybtn1" v-if="button.btnShowBy1">
            {{ buttonText.btnNameBy1 }}
          </el-button>
          <el-button class="btn" :size="size" @click="clickBybtn2" v-if="button.btnShowBy2">
            {{ buttonText.btnNameBy2 }}
          </el-button>
        </div>
      </el-col>
      <el-col :span="colBtn">
        <div :class="{'yy-btn':!isSenior,'yy-btn-long':isSenior}">
          <el-button class="btn" :size="size" type="warning " @click="clickBybtn5" v-if="button.btnShowBy5">
            {{ buttonText.btnNameBy5 }}
          </el-button>
          <el-button class="btn" :size="size" type="warning " @click="clickBybtn3" v-if="button.btnShowBy3">
            {{ buttonText.btnNameBy3 }}
          </el-button>
        </div>
      </el-col>
      <el-col :span="colBtn">
        <div :class="{'yy-btn':!isSenior,'yy-btn-long':isSenior}">
          <el-button class="btn" :size="size" type="warning " @click="clickBybtn4" v-if="button.btnShowBy4">
            {{ buttonText.btnNameBy4 }}
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: 'hySearch',
  props: {
    searchTitle: {
      type: [Array, Object],
      required: true,
      default: () => {
        return {}
      }
    },
    button: {
      type: [Array, Object],
      default: () => {
        return {btnShowBy1: false, btnShowBy2: false, btnShowBy3: false, btnShowBy4: false, btnShowBy5: false}
      }
    },
    buttonText: {
      type: [Array, Object],
      default: () => {
        return {btnNameBy1: '新增', btnNameBy2: '推送', btnNameBy3: '新增', btnNameBy4: '推送', btnNameBy5: '按钮'}
      }
    },
    value: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    labelPosition: {
      type: String,
      default: 'left'
    },
    labelWidth: {
      type: String,
      default: '80px'
    },
    size: {
      type: String,
      default: ''
    },
    col: {
      type: Number,
      default: 6
    },
    gutter: {
      type: Number,
      default: 40
    },
    isRest: {
      type: Boolean,
      default: true
    },
    inline: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      formData: {},
      isSenior: false,
      colBtn: this.col,
      column: 24 / this.col - 1
    }
  },
  computed: {},
  created() {
    this.getValue()
  },
  mounted() {
  },
  methods: {
    isShow(index) {
      if (this.isSenior) {
        this.colBtn = 24
        return true
      } else {
        this.colBtn = this.col
        if (index < this.column) {
          return true
        } else {
          return false
        }
      }
    },
    search() {
      this.isSenior = !this.isSenior
    },
    handleInput(val, key) {
      this.formData[key] = val
      this.$emit('input', this.formData)
      // this.$emit('input', { ...this.formData, [key]: val })
    },
    submitForm() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.$emit('search', this.formData)
        }
      })
    },
    clickBybtn1() {
      this.$refs['formData'].resetFields()
      this.$emit('clickbybtn1', this.formData)
    },
    clickBybtn2() {
      this.$refs['formData'].resetFields()
      this.$emit('clickbybtn2', this.formData)
    },
    clickBybtn3() {
      this.$refs['formData'].resetFields()
      this.$emit('clickbybtn3', this.formData)
    },
    clickBybtn4() {
      this.$refs['formData'].resetFields()
      this.$emit('clickbybtn4', this.formData)
    },
    clickBybtn5() {
      this.$refs['formData'].resetFields()
      this.$emit('clickbybtn5', this.formData)
    },
    restForm() {
      this.$refs['formData'].resetFields()
      this.$emit('input', this.formData)
      // for (let key in this.formData) {
      //   this.formData[key] = ''
      // }
    },
    rest() {
      this.$refs['formData'].resetFields()
      this.formData = Object.assign({}, this.value)
    },
    getValue() {
      this.formData = Object.assign({}, this.value)
    }
  },
  watch: {
    value: {
      handler(cval, oval) {
        this.getValue()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
.yy-search {
  min-height: 100%;
  width: 100%;

  .el-list-item {
  }

  .el-button--mini {
    // min-width: 80px;
  }

  .btnBycx {
    float: left;
  }

  .btn {
    margin-left: 0px;
    margin-right: 10px;
  }

  .el-date-editor {
    .el-range__icon {
      font-size: 12px;
    }
  }

  .el-form-item__content {
    .el-input__icon {
      font-size: 12px;
    }
  }

  .el-form-item__label {
    font-size: 14px;
    padding: 0;
  }

  div.yy-item.el-form-item {
    margin-bottom: 18px;
    height: 29px;
  }

  .yy-btn {
    text-align: right;
    min-width: 303px;
    padding: 0px;
  }

  .yy-btn-long {
    text-align: right;
    min-width: 303px;
    padding: 0px;
  }
}
</style>
